<template>
    <div class="layout-padding-auto layout-padding-view">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true">
      </el-form>
      <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
        style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe show-summary :summary-method="getSummaries"
        :header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
        <el-table-column type="index" label="#" width="80" />
        <el-table-column :label="$t('checkStock.billcode')" prop="billCode" />
        <el-table-column :label="$t('checkStock.materialCode')" prop="materialCode"  show-overflow-tooltip />
        <el-table-column prop="checkQty" :label="$t('checkStock.checkQty')" show-overflow-tooltip >
							<template #default="scope">
								<el-tag type="success" effect="plain">
								{{ scope.row.checkQty }}
								</el-tag>
							</template>
						</el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
  </template>
  <script setup lang="ts">
  import { BasicTableProps, useTable } from "/@/hooks/table";
  import { reactive, ref } from 'vue';
  import { GetCheckStockReprintHistorySum } from '/@/api/platform/wms/checkStock';
  import { ElMessage } from 'element-plus';
  import { useI18n } from 'vue-i18n';
  
  const { t } = useI18n();
  
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
    },
    pageList: GetCheckStockReprintHistorySum
  })
  
  const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    tableStyle
  } = useTable(state)
  const tableRef = ref();
  
  // 搜索变量
  const queryRef = ref()
  
  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList()
  }
  
  // 通过id进行子表的查询
  const query = (billcode,materialCode,barcode) => {
    // 赋值查询参数
    state.queryForm.billcode = billcode;
    state.queryForm.materialCode = materialCode;
    state.queryForm.barcode = barcode;
    // 刷新子表数据
    getDataList()
  }
  
  // 暴露变量
  defineExpose({
    resetQuery,
    query
  });
  const getSummaries = (param) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline', textAlign: 'center' } }, [
        'Sum',
      ])
      return
    }
    if (index != 3) return;
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = h('div', { style: { textAlign: 'center' } }, [
        `${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return Math.round((prev + curr)*10000)/10000
          } else {
            return Math.round(prev*10000)/10000
          }
        }, 0)}`,
      ])
    }
  })

  return sums
}
  </script>